<template>
    <div>
        <h1>求和的结果是:{{sum}}</h1>
        <h1>处理过的sum:{{processedSum}}</h1>
        <h1>同学,你的学校是:{{schooleName}}</h1>
        <div>
            <select v-model="selectValue">
                <option :value="1">1</option>
                 <option :value="2">2</option>
                  <option :value="3">3</option>
            </select> &nbsp; &nbsp; &nbsp;

            <button @click="increment">+</button> &nbsp; &nbsp; &nbsp;
            <button @click="decrement">-</button> &nbsp; &nbsp; &nbsp;
            <button @click="incrementWhenOdd">当是奇数的时候+</button>&nbsp; &nbsp; &nbsp;
            <button @click="incrementWait" >等一等再加</button>
        </div>

        <div>
            <h3>小小的跨组件查看一下人员列表</h3>
            <ul>
                <li v-for="p in personList" :key="p.id">
                    {{p.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

// 去除冗余代码
import {mapState,mapGetters,mapMutations,mapActions} from "vuex";
export default {
   name:"MyCounter",
   data(){
       return{
          
       }
   },
   computed:{
          selectValue:{
              get(){
                return this.$store.state.countAbout.selectValue;
              },
              set(val){
                  // 直接更新 mutations
                
                this.$store.commit("countAbout/UPDATE_SELECT_VAL",val) 
              }
          },
    // 借助 mapState() 来生成计算属性，从 state 中读取数据（对象写法）     
    // 可以通过 mapState() 来简写 此计算属性 
    // mapState() 会自动生成 和 sum() 计算属性相同的methods
    //...mapState({sum:"sum",schooleName:"schooleName"}),    
    

    ...mapState("personAbout",["personList"]),    
     ...mapState("countAbout",["sum","schooleName"]),      
    //sum(){
     //   return this.$store.state.sum;
    //},

    // mapGetters 同理
    //processedSum(){
    //    return this.$store.getters.processedSum;
    //},

    ...mapGetters("countAbout",['processedSum'])
    
   },

    mounted(){

        const x = mapState("countAbout",{sum:"sum",schooleName:"schooleName"})
        console.log("mounted mapState() 生成的函数对象为：",x,this.$store.state.schooleName);
    },

   methods:{

       /*increment(){
           // 方式一：直接调用 mutations
           //this.$store.commit("INCREMENT");
            // 方式二：调用 actions
            this.$store.dispatch("increment")
       },*/

        // 借助 mapActions 生成方法，方法中会调用 dispatch() 去联系 actions
       // mapActions 同理，但是注意：使用 mapActions、mapMutations 之后，
       // 向其传递的参数变成了 调用 increment 方法时传递的参数，不能自定义传参，
       // 
       ...mapActions("countAbout",['increment']),
       // mapActions 生成的函数相当于是：

        /*increment(val){
           // 不能使用自定义传递 val是哪一个值
            this.$store.dispatch("increment",val)
        },*/


       /**decrement(){
          this.$store.commit("DECREMENT");
       },*/

       // 借助 mapMutations 生成方法，方法中会调用 commit() 去联系 mutations
        // mapMutations 同理

        ...mapMutations("countAbout",{decrement:"DECREMENT"}),
     

       incrementWhenOdd(){

        if(this.sum % 2===1){
            this.increment()
           // this.$store.commit("INCREMENT");
        }
        
       },

       incrementWait(){

           setTimeout(()=>{
               this.increment()
               // this.$store.commit("INCREMENT");
           },500)
       }

   }
}
</script>
